<template>
  <Dialog title="开户申请" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="130px"
      v-loading="formLoading"
    >
      <el-form-item label="企业名称" prop="corpName">
        <el-input v-model="formData.corpName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="formData.contactName" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactMobile">
        <el-input maxlength="11" v-model="formData.contactMobile" placeholder="请输入联系人电话" />
      </el-form-item>
      <el-form-item label="默认登录名" prop="adminUser">
        <el-input v-model="formData.adminUser" placeholder="请输入默认登录名" />
      </el-form-item>
      <el-form-item label="默认登录密码" prop="adminUserPass">
        <el-input
          v-model="formData.adminUserPass"
          type="password"
          show-password
          placeholder="请输入默认登录密码"
        />
      </el-form-item>
      <el-form-item label="话费成本价" prop="callCostPrice">
        <el-input type="number" v-model="formData.callCostPrice" placeholder="请输入话费单价" />
      </el-form-item>
      <el-form-item label="话费销售价" prop="callSalePrice">
        <el-input type="number" v-model="formData.callSalePrice" placeholder="请输入话费单价" />
      </el-form-item>
      <el-form-item label="外呼类型" prop="callChannel">
        <el-radio-group v-model="formData.callChannel">
          <el-radio label="1">点呼</el-radio>
          <el-radio label="2">群呼</el-radio>
          <el-radio label="3">全部</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="需要开通账号数" prop="accountNum">
        <el-input type="number" v-model="formData.accountNum" placeholder="请输入需要开通账号数" />
      </el-form-item>

      <el-form-item label="需要开通坐席数" prop="agentNum">
        <el-input type="number" v-model="formData.agentNum" placeholder="请输入需要开通坐席数" />
      </el-form-item>
      <el-form-item label="话术" prop="speech">
        <el-input type="textarea" v-model="formData.speech" placeholder="请输入话数" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as proxyApi from '@/api/home/proxy.ts'

defineOptions({ name: 'Apeningapplication' })

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const formLoading = ref(false)

const formData = ref({
  corpName: undefined,
  contactName: undefined,
  contactMobile: undefined,
  adminUser: undefined,
  adminUserPass: undefined,
  callCostPrice: undefined,
  callSalePrice: undefined,
  callChannel: undefined,
  accountNum: undefined,
  agentNum: undefined,
  speech: undefined,
  remark: undefined
})
const formRules = reactive({
  corpName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
  contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  contactMobile: [{ required: true, message: '联系人电话不能为空', trigger: 'blur' }],
  adminUser: [{ required: true, message: '默认登录名不能为空', trigger: 'blur' }],
  adminUserPass: [{ required: true, message: '默认登录密码不能为空', trigger: 'blur' }],
  callCostPrice: [{ required: true, message: '话费成本价不能为空', trigger: 'blur' }],
  callSalePrice: [{ required: true, message: '话费销售价不能为空', trigger: 'blur' }],
  callChannel: [{ required: true, message: '外呼类型不能为空', trigger: 'change' }],
  accountNum: [{ required: true, message: '需开通账号数不能为空', trigger: 'blur' }],
  agentNum: [{ required: true, message: '需开通坐席数不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  resetForm()
}
defineExpose({ open })

/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    // await AuthenApi.corpAuth(formData.value)
    await proxyApi.createTenantApprove(formData.value)
    message.success(t('common.createSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    corpName: undefined,
    contactName: undefined,
    contactMobile: undefined,
    adminUser: undefined,
    adminUserPass: undefined,
    callCostPrice: undefined,
    callSalePrice: undefined,
    callChannel: undefined,
    accountNum: undefined,
    agentNum: undefined,
    speech: undefined,
    remark: undefined
  }
  formRef.value?.resetFields()
}
</script>
